<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app" ref="box"><!--vue获取dom结构：设置ref属性，访问用vm.$refs.box-->
			{{message}}
			<input type="text" v-model="message" />
			<input type="button" value="$mount()挂载" onclick="mount()" />
			<input type="button" value="$destroy()销毁" @click="des()" />
			<br />
			<input type="button" value="设置vm.obj.age=20" onclick="setvm()" />
			<input type="button" value="$forceUpdate()更新dom" onclick="forceUpdate()" />
			<p>姓名：{{obj.name}}，年龄：{{obj.age}}</p>
			<br />
			<ul>
				<li ref="li" v-for="item in arr">{{item}}</li><!--vm.$refs.li返回一个数组-->
			</ul>
			<input type="button" value="pusharr $nextTick()监听" onclick="nextTick()" />
		</div>
	</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		data:{
			message:"123",
			arr:["item1","item2","item3"],
			obj:{
				name: "张"
			}
		},
		methods:{
			des(){
				//销毁实例和dom关联
				//一般不建议直接使用该api
				this.$destroy()
			},
		},
		computed:{
			
		},
		watch:{
			
		},
		beforeCreate:function(){
			console.log(this.message)
		},
		//创建后  可以进行ajax请求
		created:function(){
			console.log(this.message)
		},
		//挂载了才会执行beforeMount&&mounted
		beforeMount:function(){
			//beforeMount 判断是否配置el/调用$mount() 和 判断是否存在配置el/调用$mount()的dom结构 之后执行
			//mounted 将dom结构读取出来，渲染dom结构 之前执行
			//打印出来的#app显示{{message}}
			console.log(document.getElementById("app"))
			console.log(this.$refs.box)
		},
		mounted:function(){
			//mounted 将dom结构读取出来，渲染dom结构 之后执行
			//打印出来的#app显示值123
			console.log(document.getElementById("app"))
			console.log(this.$refs.box)
			console.log(this.$refs.li)
		},
		//数据发生改变时
		beforeUpdate:function(){
			console.log("beforeUpdate")
		},
		updated:function(){
			console.log("updated")
		},
		beforeDestroy:function(){
			console.log("beforeDestroy")
		},
		destroyed:function(){
			console.log("destroyed")
		}
	})
	
	function mount(){
		vm.$mount("#app")
	}
	function forceUpdate(){
		//更新绑定的dom
		//数据无变化更新dom，触发beforeUpdate()和updated()钩子函数
		vm.$forceUpdate()
	}
	function setvm(){
		vm.obj.age = 20;
	}
	function nextTick(){
		vm.arr.push("item4")
		//$nextTick()监听一个属性变化，导致dom的更新，执行回调函数
		//$nextTick()写在属性变化之后
		vm.$nextTick(function(){
			console.log("监听到arr更新，导致dom更新")
		})
	}
	
	/*
	 生命周期：
	 
	 new Vue()
	 
	 vue实例初始化
	 
	 读取所有lifecycle函数(钩子函数)，但不执行
	 
	 beforeCreate()
	 
	 读取data属性  读取computed计算数性  添加set/get方法  watch监听  methods方法
	 
	 created() 可以操作数据
	 
	 判断是否配置el/调用$mount()
	 
	 判断是否存在配置el/调用$mount()的dom结构，也就是判断是否挂载
	 
	 beforeMount()
	 
	 将dom结构读取出来，渲染dom结构
	 
	 mounted()  可以操作dom 使用ref
	 
	 （用户操作数据）（vue在工作期间发生数据变化导致dom结构重新渲染）
	 beforeUpdate()
	 updated()
	 
	 （执行$destroy()||相关联的dom结构被删除了）
	 beforeDestroy()
	 destroyed()
	 
	 * */
</script>